<script>
import Layout from "@/layout/index.vue";

export default {
  name: 'social_securitys',
  data() {
    return {
      isGree: false,
      hobby: []
    }
  },
  methods: {
    handleClick() {
      // 添加一条路由规则到路由表
      this.$router.addRoutes([{
        path: '/test',
        component: Layout,
        children: [{
          path: '',
          name: 'test',
          component: () => import('@/views/Test/Test.vue'),
          meta: {title: '动态路由'}
        }]
      }
      ])
    }
  }
}
</script>

<template>
  <div class="social">
    <!--
    使用v-model绑定复选框数据的类型分为两种
    1.非数组(默认会转为boolban，绑定的是checked属性)
    2.数组(会将用户勾选的复选框对应的value属性值放入数组中)
    -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>v-model指令绑定checkbox</span>
      </div>
      <div>
        <input type="checkbox" v-model="isGree">
        <span style="margin-left: 10px">{{ isGree }}</span>
      </div>
      <div style="margin-top: 10px">
        <input type="checkbox" v-model="hobby" value="0">0
        <input type="checkbox" v-model="hobby" value="1">1
        <input type="checkbox" v-model="hobby" value="2">2
        <input type="checkbox" v-model="hobby" value="3">3
        <span style="margin-left: 10px">{{ hobby }}</span>
      </div>
      <hr>
      <h3>addRoutes()动态路由</h3>
      <el-button type="primary" @click="handleClick">点我添加一条路由规则到路由表中</el-button>
    </el-card>
  </div>
</template>

<style scoped lang="scss">
.social {
  .el-card {
    margin-top: 10px;

    input {
      margin: 0 10px;
      cursor: pointer;
    }
  }
}
</style>
